<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位技巧1</title>
    <style>
        .top {
            background-color: #5aa4ae;
            height: 120px;
            font-size: 40px;
            color: #fff;
            font-weight: bold;
            position: fixed;
            top: 0;
            /*100%的视口宽度 viewport width*/
            /*100%的视口高度 viewport height*/
            width: 100vw;
        }

        .main {
            margin-top: 130px;
        }

        .left,.right {
            width: 60px;
            height: 200px;
            position: fixed;
            top: 300px;
        }
        .left{
            background-color: #fff799;
            left: 20px;
        }
        .right{
            background-color: #f35336;
            right: 20px;
        }
    </style>
</head>
<body>
<div class="top">我是顶部广告条</div>
<div class="left">我是左侧广告条</div>
<div class="right">我是右侧广告条</div>
<div class="main">
    我是内容
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet eligendi error incidunt nemo, neque omnis porro
        sed velit vitae voluptatum! Cum delectus error laudantium placeat sed sunt vero? Dolores, impedit?
    </div>
    <div>Aliquam amet architecto aspernatur autem debitis dolor ea eius eveniet expedita, explicabo facilis hic impedit
        ipsam ipsum iste maxime nemo nobis nostrum pariatur perspiciatis quis sapiente totam, veritatis voluptas
        voluptates.
    </div>
    <div>Aliquid architecto, blanditiis dolorum minus molestias nihil odit, pariatur quasi qui quidem sint voluptatum? A
        aspernatur assumenda at consequatur consequuntur cupiditate eaque enim illo maxime, necessitatibus, officiis
        quod, tenetur veritatis?
    </div>
    <div>Ad aliquam, at commodi doloribus eum facilis harum repellat? Animi consectetur corporis, culpa, hic illo
        impedit inventore iusto, laboriosam quam quas soluta sunt ullam unde ut veniam vitae voluptatem voluptatum!
    </div>
    <div>Ad dolorem eius eligendi facere, fugit harum inventore iste quaerat quia sint vel, veritatis vero voluptatem?
        Accusantium aliquam distinctio earum, est facere iste minima repellat? Architecto autem fugit laborum odit!
    </div>
    <div>Ad alias commodi consectetur consequuntur corporis cumque, delectus deleniti distinctio eaque eius eum
        exercitationem facere fuga hic incidunt minima mollitia necessitatibus nihil odio quas quia quis reprehenderit.
        Nihil nostrum, quibusdam.
    </div>
    <div>Adipisci corporis cumque earum est illum maiores neque provident ullam? Autem id ipsa officiis reprehenderit?
        Beatae dolore dolorum eos eum iste nam necessitatibus reprehenderit rerum soluta suscipit. Dignissimos, neque
        optio.
    </div>
    <div>Architecto assumenda at aut autem, corporis deserunt eos, inventore iste iure laboriosam necessitatibus
        nesciunt placeat porro quasi sed veniam voluptas! Animi eum sequi soluta veniam? Consectetur eveniet
        exercitationem repellat sunt!
    </div>
    <div>A alias architecto aspernatur autem beatae consectetur cupiditate expedita inventore, ipsam ipsum labore
        laborum magnam minus officia perferendis possimus, praesentium quasi recusandae repellat repudiandae sed, vel
        vitae voluptates? Nam, voluptatibus!
    </div>
    <div>Aliquam aut cum dolore dolores dolorum earum eius, et eum facere libero minus neque nesciunt placeat provident
        quisquam recusandae saepe tempora ullam? Accusantium cum doloremque ducimus fuga fugiat perspiciatis quasi.
    </div>
    <div>Ad animi consectetur debitis deleniti distinctio dolorem earum explicabo in iure iusto, molestias nesciunt,
        nostrum odit qui quos repudiandae saepe? A at est explicabo, harum obcaecati omnis porro temporibus voluptatem.
    </div>
    <div>Dignissimos eos esse est et eveniet mollitia provident quas quidem. Dolor ducimus eos esse illo illum, ipsam
        labore maiores nostrum odit velit! Dignissimos dolorum et expedita in nihil sint ullam?
    </div>
    <div>Accusantium aperiam autem deleniti, distinctio excepturi ipsa ipsam, itaque iusto magnam magni modi omnis quae
        ratione, recusandae saepe soluta sunt! Laboriosam, modi, rem. Adipisci id libero nam quas quisquam rerum.
    </div>
    <div>Alias corporis fugit ipsam molestiae officia optio quae quia rem rerum voluptatum. Ad aperiam aspernatur
        dolores ea et exercitationem facilis harum hic inventore ipsam quae quidem, quisquam, reprehenderit rerum
        voluptatum!
    </div>
    <div>Accusamus accusantium asperiores commodi delectus dolore facere fugiat illum incidunt, inventore ipsum minima
        minus mollitia nisi nostrum odio possimus provident quia quos ratione rerum sit soluta tempora tenetur
        veritatis, voluptates.
    </div>
    <div>Animi autem corporis culpa cum, doloribus eaque earum eos iusto nemo neque nesciunt, nisi quam sint, sit
        temporibus tenetur voluptates! Dolore error itaque modi molestias odio quod recusandae, repellendus sequi?
    </div>
    <div>Ab autem consequuntur debitis deserunt dolores doloribus eligendi error laborum maiores nobis omnis possimus
        praesentium quas quasi sed, temporibus totam. Asperiores esse ipsam possimus sed. Ea fugiat fugit minima rem.
    </div>
    <div>Dicta fuga id omnis quidem unde? Accusamus autem commodi cum iste natus provident repudiandae vero! Atque
        deleniti dolore doloribus id modi necessitatibus, quos rerum sapiente similique sint tempore, unde voluptatem.
    </div>
    <div>Ad consectetur, corporis doloribus excepturi facilis labore magni necessitatibus numquam odit sint sunt tempore
        velit, veniam vitae voluptatibus! Aliquid atque beatae consequuntur corporis cum dolor iusto, maiores molestias
        placeat saepe!
    </div>
    <div>Accusantium aliquam animi aspernatur at excepturi, explicabo id impedit in inventore ipsam libero magni maxime
        non obcaecati perferendis possimus quas quos ratione reprehenderit repudiandae sed sint sunt ut vel voluptatem?
    </div>
    <div>Enim illum iure natus officiis porro reprehenderit sunt voluptate? Accusamus, aliquam doloribus, et eum
        exercitationem facilis in labore omnis perferendis quidem reprehenderit similique tempore tenetur! Consectetur
        eius illum officiis totam!
    </div>
    <div>Aliquam animi atque commodi consequuntur cumque dolores eaque est expedita ipsa laborum libero mollitia
        nesciunt obcaecati officiis omnis possimus quam quisquam quos sequi tempore unde ut vel vero vitae, voluptatum.
    </div>
    <div>Distinctio dolor fuga fugit harum possimus. Cum in libero magni neque obcaecati quibusdam ut! Accusantium
        architecto consequuntur deserunt doloribus impedit nam nesciunt, non obcaecati odio quod sed temporibus totam
        ullam.
    </div>
    <div>Atque earum facilis incidunt libero quam. A ad culpa cumque ea error et ex facere fuga fugiat ipsam laudantium
        nemo nihil, obcaecati perferendis quidem recusandae repellat repudiandae sunt velit voluptatibus!
    </div>
    <div>Ab itaque libero maxime odio officiis possimus sit vero? Cumque, doloremque pariatur quam quasi quo rem
        reprehenderit suscipit vel. Aperiam, asperiores dicta explicabo facilis inventore labore natus perspiciatis
        provident quos?
    </div>
    <div>Ab consectetur consequatur consequuntur delectus earum eius illo illum labore laboriosam, nihil nostrum numquam
        obcaecati odio quam quia quidem sequi! Architecto et id labore laboriosam laudantium officiis pariatur ratione,
        voluptas?
    </div>
    <div>Alias architecto at aut delectus deserunt ea eaque eveniet facilis illum ipsum magnam maiores nesciunt nihil
        nulla odio, optio quae quisquam quos reiciendis sed sunt totam ullam voluptas voluptate voluptatem.
    </div>
    <div>Praesentium quae soluta unde. Blanditiis distinctio doloribus ducimus est exercitationem facere iusto
        laboriosam mollitia necessitatibus non obcaecati pariatur perspiciatis, quis quisquam quos saepe sed suscipit
        totam veniam voluptates. Accusamus, voluptates.
    </div>
    <div>At consequuntur distinctio doloremque harum, incidunt repellendus reprehenderit saepe voluptate! Architecto
        fugiat inventore magni! Cum eius labore molestiae numquam odit quibusdam quos velit vitae. Dolores facilis
        incidunt mollitia omnis quas?
    </div>
    <div>Ab aliquam aperiam atque consequatur culpa explicabo incidunt iste iusto, laborum libero maiores minus modi
        nesciunt pariatur repellat ut veritatis voluptas? Alias cupiditate dolore eaque, impedit itaque numquam quaerat?
        Aliquid!
    </div>
    <div>Adipisci alias aut commodi cumque, cupiditate delectus dolor dolores eius enim esse exercitationem explicabo
        fugiat id nisi optio repellendus sed similique sit, totam, unde? At omnis tempora voluptatum. Consequuntur,
        libero?
    </div>
    <div>Blanditiis corporis debitis dolorum eligendi eos fugit numquam optio quisquam sequi, voluptatibus! Ad aliquid
        consectetur dolores, esse et illo iusto, maiores natus perspiciatis, possimus quia quos tempore voluptates.
        Inventore, veritatis.
    </div>
    <div>Animi autem beatae cum cumque dignissimos dolores eaque eligendi enim error ex exercitationem facilis fugiat
        hic ipsa laboriosam magnam maiores maxime minima mollitia natus neque porro, repudiandae saepe sapiente tenetur!
    </div>
    <div>Libero nobis optio possimus. Architecto, assumenda deleniti dolor expedita maxime perferendis placeat
        recusandae reiciendis soluta voluptatum! Accusantium doloribus expedita harum labore magnam molestiae quis sed
        sequi ut? Animi, eligendi fuga.
    </div>
    <div>Adipisci beatae, error iure quam reiciendis repellat reprehenderit totam voluptatibus. Beatae dolore doloremque
        eum ex explicabo, fuga incidunt ipsum maxime modi nemo pariatur perspiciatis quibusdam tempore temporibus, ut
        veritatis, voluptates?
    </div>
    <div>Alias, aliquam autem distinctio eius illum nobis quasi, rem rerum, sit tempora tenetur veritatis voluptate. Ab,
        atque blanditiis culpa eius esse hic laboriosam magnam minima quas quos reprehenderit sequi voluptatibus.
    </div>
    <div>Ab ad adipisci animi aperiam beatae consectetur consequatur culpa, delectus, deleniti distinctio dolorem
        eligendi facilis fugiat id inventore ipsam magni maiores nesciunt quas quasi rem sed sunt voluptate. Omnis,
        repellat.
    </div>
    <div>Adipisci, consectetur consequuntur illo nemo nihil possimus repellat repudiandae. Accusantium blanditiis
        debitis dicta distinctio doloribus, fugiat, itaque labore maxime minima odit porro quae recusandae voluptatibus!
        Earum nulla quaerat sunt voluptates.
    </div>
    <div>Corporis est fugit illo in iusto laboriosam maxime natus odio quam voluptate. Adipisci corporis, enim error
        maxime mollitia nostrum, possimus praesentium quasi quia quos, ullam velit vitae? Debitis, itaque, recusandae.
    </div>
    <div>Animi consequatur corporis ea eaque esse incidunt magni nam, optio soluta. Accusamus aliquid aspernatur
        assumenda aut dolore enim, fuga itaque iusto laborum omnis, porro quia quibusdam quidem quisquam tempore ullam.
    </div>
    <div>Aliquam corporis doloribus est expedita illum ipsa laborum laudantium minus, nulla perferendis quasi quisquam
        sequi voluptate. Ad ex impedit incidunt nesciunt repellendus. Expedita facilis laboriosam molestias officiis sed
        temporibus voluptatem!
    </div>
    <div>Consectetur dolor doloribus eligendi exercitationem natus optio, ratione ullam. Accusantium alias blanditiis,
        dicta doloremque facere, illum ipsa nesciunt odit perspiciatis quidem quisquam repellat repellendus tenetur
        totam unde vel veniam voluptates.
    </div>
    <div>Dignissimos, nulla, velit. A blanditiis illum ipsam ipsum magnam saepe vitae. Accusamus cum dicta, esse ex
        inventore ipsam labore laborum molestias nam nobis, nostrum perferendis reiciendis, rerum tempora unde
        voluptatem?
    </div>
    <div>Ab at culpa dicta dignissimos dolore ducimus eaque eligendi error exercitationem, fugiat hic itaque laboriosam
        mollitia natus nesciunt nulla numquam optio pariatur perspiciatis, praesentium quidem, repellat sit soluta
        veniam voluptatum!
    </div>
    <div>Aliquid, beatae culpa dolore dolorem odio perferendis porro repellat sapiente. Aspernatur aut autem eos est
        eveniet magnam, nam nihil possimus rem voluptate! Animi distinctio doloribus itaque neque perferendis saepe
        veniam.
    </div>
    <div>Architecto aspernatur debitis dignissimos distinctio ducimus et eveniet excepturi fugiat illum minima natus
        nemo, rem tempore. Ab adipisci assumenda culpa earum enim illo incidunt, ipsum mollitia pariatur quia voluptate
        voluptates!
    </div>
    <div>Ab amet aspernatur atque autem commodi dolorum, ducimus eum ex facere illo in incidunt labore modi nobis
        officiis optio perferendis porro quaerat quod, quos ratione repudiandae ullam veniam voluptate voluptatum.
    </div>
    <div>Eius excepturi explicabo ipsa nostrum recusandae sequi? Aliquid at deleniti dicta, ducimus, ea facere fugiat
        minima molestias nam necessitatibus non officiis pariatur qui quisquam rem saepe tempore totam ut voluptatem.
    </div>
    <div>Commodi cumque laboriosam nobis possimus quaerat quia recusandae. Aperiam aspernatur assumenda, cumque
        dignissimos dolorem dolorum, ea excepturi illum ipsum itaque iusto labore laboriosam magnam, pariatur
        praesentium quisquam ullam vel voluptate!
    </div>
    <div>Aliquam architecto asperiores atque culpa ducimus eius eveniet iste maxime minus pariatur recusandae,
        repellendus reprehenderit similique sint sunt vel vero! Accusamus assumenda eius expedita illo ipsam, omnis
        quaerat qui veritatis.
    </div>
</div>
</body>
</html>